<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>Table - ESUI Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
        <link rel="stylesheet" href="assets/themes/standard.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="assets/ie8.css" />
        <![endif]-->
    </head>
    <body>
        <div class="header">
            <h1 id="branding">ESUI - Table</h1>
        </div>
        <div class="ui-g main-container">
            <div id="side-bar" class="ui-u-1-5">
                <ul id="navigator" class="ui-nav">
                </ul>
            </div>
            <div id="main" class="ui-u-4-5">
                <h2>Table</h2>
                <div class="example">
                    <div
                        data-ui="type:Table;id:table;columnResizable:true;variants:striped"></div>
                </div>

                <h2>Table</h2>
                <p>Table</p>
                <div class="example">
                    <div data-follow-thead="myTable" class="row">
                        <button type="button" data-ui="id:disabledBtn;type:Button;">toggleDisable</button>
                        <button type="button"data-ui="id:changeWidthBtn;type:Button;">changeWidth</button>
                        <button type="button" data-ui="id:SortableBtn;type:Button;">toggleSortable</button>
                        <button type="button" data-ui="id:ColumnResizableBtn;type:Button;">toggleColumnResizable</button>
                        <button type="button" data-ui="id:SetDataSourceBtn;type:Button;">setDataSource</button>
                        <button type="button" data-ui="id:changeHeadPositionBtn;type:Button;">changeHeadPosition</button>
                        <button type="button" data-ui="id:resetFollowHeadBtn;type:Button;">resetFollowHead</button>
                        <button type="button" data-ui="id:getSelectedItemsBtn;type:Button;">getSelectedItems</button>
                        <button type="button" data-ui="id:updateRowBtn;type:Button;">updateRow</button>
                        <button type="button" data-ui="id:setAllRowBtn;type:Button;">setAllRowBtn</button>
                    </div>
                    <h3>Fixed Header</h3>
                    <div class="row">
                        <div
                        data-ui="type:Table;id:myTable;columnResizable:true;"
                        data-ui-extension-tableedit-type="TableEdit"
                        data-ui-extension-tablesubrow-type="TableSubrow"
                        data-ui-extension-command-type="Command"
                        data-ui-extension-command-events="click mousedown mouseup"
                        data-ui-extension-auto-type="AutoSort"
                        data-ui-extension-customdata-type="CustomData"></div>
                    </div>
                    <h3>空表格</h3>
                    <div class="row">
                        <div data-ui="type:Table;id:myTable4;" data-ui-extension-tableedit-type="TableEdit" data-ui-extension-tablesubrow-type="TableSubrow"></div>
                    </div>
                    <h3>单选</h3>
                    <div class="row">
                        <div data-ui="type:Table;id:myTable5;select:single"></div>
                    </div>
                </div>
                <script type="text/sample" data-refid="main-js">
                </script>
            </div>
        </div>
        <script src="assets/loader/esl.js"></script>
        <script src="config.js"></script>
        <script src="demo.js"></script>
        <script src="assets/google-code-prettify/prettify.js"></script>
        <script id="main-js">
            var data = [
                {id:1, name: 'erik', sex: 1},
                {id:2, name: 'tony', sex: 0},
                {id:3, name: 'frank', sex: 1},
                {id:4, name: 'meimei', sex: 1},
                {id:5, name: 'false', sex: 1},
                {id:6, name: '0', sex: 1}
            ];
            data = data.concat(data);
            data = data.concat(data);
            var myTable = null;
            require(
                [
                    'esui',
                    'esui/Dialog',
                    'esui/Panel',
                    'esui/extension/TableEdit',
                    'esui/extension/TableSubrow',
                    'esui/extension/Command',
                    'esui/extension/AutoSort',
                    'esui/extension/CustomData',
                    'esui/Table',
                    'esui/Button',
                    'esui/TextBox',
                    'esui/Select',
                    'esui/Tab',
                    'demo'
                ],
                function (ui) {
                    var fields = [
                        {
                            title: '编号',
                            field: 'id' ,
                            sortable: true,
                            tip :'编号',
                            resizable: true,
                            subEntry: 1,
                            editable: 1,
                            editRules: {
                                pattern: /\d/g,
                                min: 1
                            },
                            editContent: function(item){
                                return item.id;
                            },
                            width: 100,
                            content: function (item) {
                                return item.id;
                            }
                        },
                        {
                            title: '姓名',
                            field: 'name' ,
                            tip :'姓名',
                            align: 'right',
                            editable: 1,
                            comparer : function(a, b){
                                return a.name.localeCompare( b.name );
                            },
                            sortable: true,
                            resizable : true,
                            width: 100,
                            content: function (item) {
                                return item.name;
                            }
                        },
                        {
                            title: '性别',
                            field: 'sex' ,
                            tip :'性别',
                            comparer : function(a, b){
                                return a.sex - b.sex;
                            },
                            sortable: true,
                            resizable : true,
                            width: 200,
                            content: function (item) {
                                return item.sex ? '男' : '女';
                            }
                        }
                    ];
                    var lib = require('esui/lib');
                    ui.init(document.body,{
                        properties : {
                            table: {
                                datasource: data,
                                fields: [
                                    {
                                        title: '编号',
                                        field: 'id' ,
                                        content: function (item) {
                                            return item.id;
                                        }
                                    },
                                    {
                                        title: '姓名',
                                        field: 'name',
                                        content: function (item) {
                                            return item.name;
                                        }
                                    },
                                    {
                                        title: '性别',
                                        field: 'sex' ,
                                        content: function (item) {
                                            return item.sex ? '男' : '女';
                                        }
                                    }
                                ]
                            },
                            myTable4: {
                                datasource: [],
                                fields: fields
                            },
                            myTable5: {
                                datasource: data,

                                fields: fields
                            },
                            myTable: {
                                datasource: data,
                                foot: [
                                    {
                                    },
                                    {
                                        content: function (item) {
                                            return 'item.id';
                                        }
                                    },
                                    {
                                        content: function (item) {
                                            return 'item.id';
                                        }
                                    },
                                    {
                                        content: function (item) {
                                            return 'item.id';
                                        }
                                    }
                                ],
                                sortable: true,
                                columnResizable: true,
                                followHead: true,
                                subrow:true,
                                select:'multi',
                                selectMode: 'line',
                                editable: 1,
                                subrowMutex: 0,
                                contentEncode: 1,
                                zIndex: 1214,
                                noFollowHeadCache: true,//默认为false,如无必要也最好设置为false,效率更高。
                                //selectMode :'line',
                                noDataHtml: '<p style="margin:0;">nothing</p>',
                                fields: fields
                            },
                            myTable2: {
                                noScroll: true,
                                datasource: data,
                                sortable: true,
                                columnResizable: true,
                                followHead: true,
                                select:'multi',
                                breakLine: 1,
                                editable: 1,
                                noFollowHeadCache: true,
                                //bodyMaxHeight: 300,
                                //selectMode :'line',
                                noDataHtml: '<p style="margin:0;">nothing</p>',
                                fields: [
                                    {
                                        title: '编号',
                                        field: 'id' ,
                                        sortable: true,
                                        tip :'编号',
                                        resizable: true,
                                        subEntry: 1,
                                        editable: 1,
                                        width: 50,
                                        content: function (item) {
                                            return item.id;
                                        }
                                    },
                                    {
                                        title: '姓名',
                                        field: 'name' ,
                                        tip :'姓名',
                                        editable: 1,
                                        comparer : function( a,b ){
                                            return a.name.localeCompare( b.name );
                                        },
                                        sortable: true,
                                        resizable : true,
                                        width: 300,
                                        content: function (item) {
                                            return item.name;
                                        }
                                    },
                                    {
                                        title: '性别',
                                        field: 'sex' ,
                                        tip :'性别',
                                        comparer : function( a,b ){
                                            return a.sex - b.sex;
                                        },
                                        sortable: true,
                                        resizable : true,
                                        width: 300,
                                        content: function (item) {
                                            return item.sex ? '男' : '女';
                                        }
                                    }
                                ]
                            }
                        }
                    });

                    ui.get('table').onselect = function (e) {
                        alert(e.selectedIndex.toString());
                    };
                    
                    myTable = ui.get('myTable');
                    myTable.onsubrowopen = function (e) {
                        this.setSubrowContent(
                            '<span style="line-height:30px;">Hello ' + e.item.name + '</span>',
                            e.index
                        );
                    };

                    myTable.onsubrowclose = function (e) {
                        this.getSubrowContainer(e.index).setContent('');
                    };

                    myTable.onselect = function (e) {
                        alert(e.selectedIndex.toString());
                    };

                    myTable.onresize = function (e) {
                       myTable.set('tableHeight', myTable.tableHeight + 100);
                    };

                    ui.get('setAllRowBtn').onclick = function () {
                        ui.get('myTable').setAllRowSelected(false);
                    };
                    ui.get('disabledBtn').onclick = function () {
                        ui.get('myTable').set( 'disabled', !ui.get( 'myTable' ).get('disabled'));
                    };

                    ui.get('SortableBtn').onclick = function () {
                        myTable.set( 'sortable', !myTable.get('sortable'));
                    };

                    ui.get('ColumnResizableBtn').onclick = function () {
                        myTable.set( 'columnResizable', !myTable.get('columnResizable'));
                    };

                    ui.get('SetDataSourceBtn').onclick = function(){
                         myTable.setDatasource(data.concat(data));
                    };

                    ui.get('changeWidthBtn').onclick = function () {
                       var container = document.getElementById('container');
                       var width = container.style.width;
                       switch(width){
                            case '640px':
                            width = 960;
                            break;
                            case '960px':
                            width = 1280;
                            break;
                            case '1280px':
                            width = 640;
                            break;
                            default:
                            width = 960;
                            break;
                       }
                       container.style.width = width + 'px';
                       myTable.adjustWidth();
                       //myTable.set('width', width);
                    };

                    ui.get('changeHeadPositionBtn').onclick = function(){
                        var headTopDiv = document.getElementById('HeadTopDiv');
                        var height = parseInt(headTopDiv.style.height) || 0;
                        height = height > 0 ? height - 50 : height + 50;
                        headTopDiv.style.height = height + 'px';
                    };

                    ui.get('resetFollowHeadBtn').onclick = function(){
                        myTable.resetFollowHead();
                    };

                    ui.get('getSelectedItemsBtn').onclick = function() {
                        var items= myTable.getSelectedItems();
                        alert(items[0].name);
                    };

                    ui.get('updateRowBtn').onclick = function() {
                        myTable.updateRowAt(0,  {id:1, name: 'erik', sex: 0});
                    };

                    myTable.onsort = function ( arg ) {
                        var orderBy = arg.field.field;
                        var lib = require('esui/lib');
                        if (arg.order) {
                            data.sort( function (a, b) {
                                var compareResult;
                                switch ( orderBy ) {
                                case 'name':
                                    compareResult = a.name.localeCompare( b.name );
                                    break;

                                case 'sex':
                                    compareResult = a.sex > b.sex ;
                                    break;
                                }

                                if ( arg.order == 'desc' ) {
                                    compareResult = -compareResult;
                                }

                                return compareResult;
                            } );
                        }

                        myTable.setDatasource(data);
                    };

                    myTable.onsaveedit = function(arg) {
                        if ( arg.value.length > 4 ) {
                            arg.returnResult = false;
                            arg.errorMsg = '亲，出错了哟';
                        } else {
                            myTable.setCellText(
                                arg.value,
                                arg.rowIndex,
                                arg.columnIndex
                            );
                        }
                        alert(arg.field.field);
                    };

                    myTable.oncanceledit = function(arg) {
                    };

                    myTable.onstartedit = function(arg) {
                        alert(arg.field.field);
                    };

                    myTable.setAllRowSelected(true);
                }
            );
        </script>
        <script src="sitemap.js"></script>
    </body>
</html>
